<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">

        <hr/>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-row :gutter="20">
        <el-col :sm="24" :lg="12" style="padding-left: 20px">
          <h2  style="font-size: 22px;">医院床位管理系统</h2>
          <p  style="font-size: 16px;">
            医院智慧床位管理系统是针对于现在的医院提供的一个床位管理平台。医院床位管理对于医疗机构的日常运营至关重要。有效的床位管理可以影响患者的住院流程、医疗资源的分配以及医疗服务的质量。传统的手动床位管理方法已经难以应对现代医疗机构的需求，因此，开发智慧床位管理系统变得迫切。
          </p>
          <p  style="font-size: 16px;">
            医院床位管理系统的设计与开发将有助于解决医院管理中的许多实际问题。例如。通过集中管理信息，系统可以更便捷直观的分配病房床位，这个系统的设计和开发将有助于解决医院床位管理中的实际问题。它可以实现实时床位信息跟踪、床位分配的智能化、患者排队管理等功能，提高床位的利用率，减少排队时间，降低患者滞留。这不仅有助于提高医院效率，还改善了患者的体验。
          </p>
          <p>
          </p>
          <p>
          </p>
        </el-col>

        <el-col :sm="24" :lg="12" style="padding-left: 50px">
          <el-row>
            <el-col :span="12">
              <h2 style="font-size: 22px;">技术选型</h2>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <h4  style="font-size: 18px;">后端技术</h4>
              <ul  style="font-size: 16px;">
                <li>SpringBoot</li>
                <li>Spring Security</li>
                <li>JWT</li>
                <li>MyBatis</li>
                <li>Druid</li>
                <li>Fastjson</li>
                <li>...</li>
              </ul>
            </el-col>
            <el-col :span="6">
              <h4  style="font-size: 18px;">前端技术</h4>
              <ul  style="font-size: 16px;">
                <li>Vue</li>
                <li>Vuex</li>
                <li>Element-ui</li>
                <li>Axios</li>
                <li>Sass</li>
                <li>Quill</li>
                <li>...</li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
    <el-divider/>
    <el-row>
      <!--  床位数据-->
      <el-col :span="24" :xs="24">
        <h2 style="padding-left: 20px">与您有关的床位信息</h2>
        <h2></h2>

        <el-table v-loading="loading" :data="bedList">
          <el-table-column type="selection" width="55" align="center" key="selection"/>
          <el-table-column label="床位编号" align="center" prop="bedId" key="bedId"/>
          <el-table-column label="床位类型" align="center" prop="btype.btypeName" key="btypeName"/>
          <el-table-column label="床位状态(0空闲，1占用，2预约)" align="center" prop="status" :formatter="formatStatus"
                           key="status"/>
          <el-table-column label="床位任务" align="center" prop="bedTask" key="bedTask">
            <template slot-scope="scope">
              <span v-if="scope.row.bedTask">{{ scope.row.bedTask }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="患者信息" align="center" prop="patient.patientName" key="patientName">
            <template slot-scope="scope">
              <span v-if="scope.row.patient.patientName">{{ scope.row.patient.patientName }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="医生信息" align="center" prop="doctorName" key="doctorName">
            <template slot-scope="scope">
              <span v-if="scope.row.doctorName">{{ scope.row.doctorName }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="护士信息" align="center" prop="nurseName" key="nurseName">
            <template slot-scope="scope">
              <span v-if="scope.row.nurseName">{{ scope.row.nurseName }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="手术详情" align="center" prop="surgeryAppointment" key="surgeryAppointment">
            <template slot-scope="scope">
              <span v-if="scope.row.surgeryAppointment">{{ scope.row.surgeryAppointment }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="入住时间" align="center" prop="checkinTime" width="180" key="checkinTime">
            <template slot-scope="scope">
              <span v-if="scope.row.checkinTime">{{ parseTime(scope.row.checkinTime, '{y}-{m}-{d}') }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" key="remark">
            <template slot-scope="scope">
              <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column width="150%" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:bed:edit']"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-circle-check"
                @click="handleDischarge(scope.row)"
                v-hasPermi="['system:bed:discharge']"
              >出院
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:bed:remove']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getUserBed"
        />
      </el-col>
    </el-row>
    <div class="main">
      <panel1/>
      <panel2/>
      <panel3/>
    </div>

    <!-- 添加或修改床位信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <!--            <el-form-item label="床位编号" prop="bedId">-->
            <!--              <el-input v-model="form.bedId" placeholder="请输入床位编号"/>-->
            <!--            </el-form-item>-->
            <el-form-item v-if="form.bedId !== null" label="床位状态">
              <el-select v-model="form.status" filterable placeholder="请选择床位使用情况">
                <el-option
                  v-for="status  in bedStatusOptions"
                  :key="status .value"
                  :label="status .label"
                  :value="status .value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="床位类型">
              <el-select v-model="form.btype.btypeId" filterable placeholder="请选择床位类型">
                <el-option
                  v-for="item in bedTypeOptions"
                  :key="item.btypeId"
                  :label="item.btypeName"
                  :value="item.btypeId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="床位任务" prop="bedTask">
          <el-input v-model="form.bedTask" type="textarea" placeholder="请输入床位任务"/>
        </el-form-item>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="患者信息" prop="patientId">
          <el-select v-model="form.patientId" filterable placeholder="请输入患者信息">
            <el-option
              v-for="item in patientOptions"
              :key="item.patientId"
              :label="item.patientName"
              :value="item.patientId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.bedId !== null && form.status === 1" label="医生信息" prop="doctorInfo">
              <el-select v-model="form.doctorInfo" filterable placeholder="请选择医生">
                <el-option
                  v-for="item in doctorOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.bedId !== null && form.status === 1" label="护士信息" prop="doctorInfo">
              <el-select v-model="form.nurseInfo" :label="form.doctorName" filterable placeholder="请选择护士">
                <el-option
                  v-for="item in nurseOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="手术详情" prop="surgeryAppointment">
          <el-input v-model="form.surgeryAppointment" placeholder="请输入手术详情"/>
        </el-form-item>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="入住时间" prop="checkinTime">
          <el-date-picker clearable
                          v-model="form.checkinTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择入住时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="form.bedId !== null && form.status === 1" label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Panel1 from './cockpit/Panel1'
  import Panel2 from './cockpit/Panel2'
  import Panel3 from './cockpit/Panel3'
  import * as echarts from 'echarts'
  import 'echarts-liquidfill'
  import VueSeamlessScroll from 'vue-seamless-scroll'
  import { listUser, getUserProfile, getUserProfileBed } from '@/api/system/user'
  import { listBed, getBed, delBed, addBed, updateBed, dischargeBed } from '@/api/system/bed'
  import { getBtype, listBtype } from '@/api/system/btype'
  import { listPatient } from '@/api/system/patient'
  import { listBedCharts, listUserForDept } from '@/api/system/charts'

  export default {
    name: 'Index',
    components: { Panel1, Panel2, Panel3 },

    data() {
      return {
        UserForDept: null,
        userForDeptDTO: [],
        userForDeptList: [{ name: '', doctorvalue: '', nursevalue: '' }],
        rgb1: null,
        rgb2: null,
        bedBar: null,
        userwaterChart: null,
        userForDeptCount_DeptType: [],
        userForDeptCount_DeptTypeNum: [],
        bedtypeCount_bedTypeName: [],
        bedtypeCount_bedNum: [],
        bedTypeCount: [],
        // 版本号
        version: '3.8.7',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 床位信息表格数据
        bedList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        //医生选项
        doctorOptions: [],
        //患者选项
        patientOptions: [],
        //护士选项
        nurseOptions: [],
        //床位类型
        bedTypeOptions: [],
        //床位类型名称
        btypeName: undefined,
        bedStatusOptions: [
          { value: 0, label: '空闲' },
          { value: 1, label: '占用' },
          { value: 2, label: '预约' }
        ],
        // 表单参数
        form: {
          doctorInfo: '', // 用于绑定医生信息的字段
          doctorName: '', // 用于显示医生名字的字段
          btype: {
            btypeName: ''
          }
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          btypeId: null,
          //用于筛选的床位类别
          btype: {
            btypeName: null
          },
          patient: {
            patientName: null
          },
          status: null,
          bedTask: null,
          patientId: null,
          doctorInfo: null,
          nurseInfo: null,
          surgeryAppointment: null,
          checkinTime: null
        },
        // 表单校验
        rules: {
          // btypeName: [
          //   { required: true, message: '床位类型不能为空', trigger: 'change' }
          // ]
        }
      }
    },
    watch: {
      // 根据名称筛选部门树
      btypeName(val) {
        this.$refs.tree.filter(val)
      }
      // $route() {
      //   this.resizeChart();
      // },
    },
    computed: {
      optionHover() { //滚动组件属性
        return {
          step: 0.3,
          hoverStop: true // 是否开启鼠标悬停stop
        }
      }
    },
    created() {
      this.getUserBed()
      this.getIdType()
      this.getPatient()
      // this.getBedTypeList()
      // this.getBedTypeCount()
      // this.getUserForDept()
    },

    methods: {

      initUserForDeptPie() {
        this.UserForDept = echarts.init(this.$refs.UserForDept, 'macarons')
        this.UserForDept.setOption({
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: '26'
            },
            formatter: '<div style=\'color: #d0860c;text-align: center\'>{b}</div>累计人数:<div style=\'color: #d0860c;text-align: center\'> {c}人</div>'
          },
          color: ['#0BC2FD', '#11FFFB', '#226EBC', '#F8BB05'],
          series: [
            {
              type: 'pie',
              radius: ['40%', '75%'],
              label: {
                show: false
              },
              emphasis: {
                scaleSize: 200,
                label: {
                  show: false,
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.userForDeptDTO
            },
            {
              name: '',
              type: 'pie',
              radius: ['83%'],
              hoverAnimation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: 'rgba(66, 66, 66, .0)',
                borderWidth: 1,
                borderColor: '#1c6ebf'
              },
              data: [100]
            }
          ]
        })
      },
      initBarChart() {
        this.userwaterChart = echarts.init(this.$refs.userwaterChart, 'macarons')
        this.userwaterChart.setOption({
          title: [
            {
              text: this.doctorOptions.length,
              x: '12%',
              y: '35%',
              textStyle: {
                fontSize: 45,
                fontWeight: 500,
                color: 'rgba(7, 156, 251, 1)',
                fontFamily: 'Source Han Sans CN'
              }
            },
            {
              text: this.nurseOptions.length,
              x: '47%',
              y: '35%',
              textStyle: {
                fontSize: 45,
                fontWeight: 500,
                color: 'rgba(248, 187, 5, 1)',
                fontFamily: 'Source Han Sans CN'
              }
            }
            ,
            {
              text: 6,
              x: '82%',
              y: '35%',
              textStyle: {
                fontSize: 45,
                fontWeight: 500,
                color: 'rgba(4, 249, 199,1)',
                fontFamily: 'Source Han Sans CN'
              }
            }
          ],
          series: [
            {
              radius: '70%', // 水球图的半径
              center: ['15%', '45%'],
              type: 'liquidFill',
              data: [0.4, 0.3, 0.2, 0.1],
              label: {
                show: false,
                fontSize: 36,
                fontWeight: 400,
                color: 'rgba(7, 156, 251, 1)'
              },
              backgroundStyle: {
                color: 'rgba(14, 36, 97, 1)',
                opacity: 0.5
              },
              outline: {
                show: true,
                itemStyle: {
                  shadowBlur: 5, // 边框的阴影范围 一旦设置了内外都有阴影
                  shadowColor: 'rgba(7, 156, 251, 1)', // 边框的阴影颜色,
                  borderWidth: 5, // 边框的宽度
                  borderColor: 'rgba(7, 156, 251, 1)' // 边框颜色
                }
              }
            },
            {
              radius: '70%', // 水球图的半径
              center: ['50%', '45%'],
              type: 'liquidFill',
              data: [0, 0.3, 0.2, 0.1],
              label: {
                show: false,
                fontSize: 36,
                fontWeight: 400,
                color: 'rgba(248, 187, 5, 1)'
              },
              backgroundStyle: {
                color: 'rgba(14, 36, 97, 1)',
                opacity: 0.5
              },
              itemStyle: {
                color: 'rgba(248, 187, 5, 1)', // 水球显示的背景颜色
                opacity: 0.5, // 波浪的透明度
                shadowBlur: 10 // 波浪的阴影范围
              },
              outline: {
                show: true,
                itemStyle: {
                  shadowBlur: 5, // 边框的阴影范围 一旦设置了内外都有阴影
                  shadowColor: 'rgba(248, 187, 5, 1)', // 边框的阴影颜色,
                  borderWidth: 5, // 边框的宽度
                  borderColor: 'rgba(248, 187, 5, 1)' // 边框颜色
                }
              }
            },
            {
              radius: '70%', // 水球图的半径
              center: ['85%', '45%'],
              type: 'liquidFill',
              data: [0.8, 0.3, 0.2, 0.1],
              label: {
                show: false,
                fontSize: 36,
                fontWeight: 400,
                color: 'rgba(4, 249, 199, 1)'
              },
              backgroundStyle: {
                color: 'rgba(14, 36, 97, 1)',
                opacity: 0.5
              },
              itemStyle: {
                color: 'rgba(4, 249, 199, 1)', // 水球显示的背景颜色
                opacity: 0.5, // 波浪的透明度
                shadowBlur: 10 // 波浪的阴影范围
              },
              outline: {
                show: true,
                itemStyle: {
                  shadowBlur: 5, // 边框的阴影范围 一旦设置了内外都有阴影
                  shadowColor: 'rgba(4, 249, 199, 1)', // 边框的阴影颜色,
                  borderWidth: 5, // 边框的宽度
                  borderColor: 'rgba(4, 249, 199, 1)' // 边框颜色
                }
              }
            }
          ]
        })
      },
      initBedBar() {
        this.bedBar = echarts.init(this.$refs.bedBar, 'macarons');
        this.bedBar.setOption({
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '26',
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '1%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            show: false,
            axisLabel: {
              fontSize: 24
            },
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                // y轴文字的配置
                show: true,
                interval: 0,
                textStyle: {
                  color: '#fff',
                  fontSize: '26'
                }
              },
              data: this.bedtypeCount_bedTypeName
            },
            {
              type: 'category',
              inverse: true,
              axisTick: 'none',
              axisLine: 'none',
              show: true,
              axisLabel: {
                textStyle: {
                  color: '#fff',
                  fontSize: '30'
                }
              },
              data: this.bedtypeCount_bedNum
            }
          ],
          series: [
            {
              type: 'bar',
              datasetIndex: 1,
              data: this.bedtypeCount_bedNum,
              showBackground: true,
              barWidth: 30,
              label:{
                fontSize:20 // 调整柱状图标签字体大小
              },
              backgroundStyle: {
                color: '#0F2A68'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [
                      { offset: 0, color: 'rgba(10, 196, 255, 1)' },
                      { offset: 1, color: 'rgba(44, 204, 255, 0.3)' }
                    ]
                  )
                }
              }
            }
          ]
        });
      },

      getUserForDept() {
        listUserForDept().then(response => {
          console.log('--listUserForDept--', response.data)
          this.userForDeptDTO = response.data.map(item => ({
            name: item.deptType,
            value: item.deptTypeNum
          }))
          this.userForDeptList = response.data.map(item => ({
            name: item.deptType,
            doctorvalue: item.doctorCount,
            nursevalue: item.nurseCount
          }))
          console.log('--userForDeptDTO--', this.userForDeptDTO)
          // this.initUserForDeptPie()
        })
      },
      /** 查询床位数量列表 */
      getBedTypeCount() {
        listBedCharts().then(response => {
          this.bedTypeCount = response.data
          this.bedTypeCount = response.data.map(item => ({
            bedTypeName: item.bedTypeName,
            bedNum: item.bedNum
          }))
          for (let i = 0; i < response.data.length; i++) {
            this.bedtypeCount_bedTypeName[i] = this.bedTypeCount[i].bedTypeName
            this.bedtypeCount_bedNum[i] = this.bedTypeCount[i].bedNum
          }
          // this.initBedBar()
        })
      },
      /** 查询床位类型列表 */
      getBedTypeList() {
        listBtype().then(response => {
          this.bedTypeOptions = response.rows
        })
      },
      // 获取患者名单
      getPatient() {
        listPatient().then(response => {
          this.patientOptions = response.rows
        })
      },
      // 获取医生及护士名单
      getIdType() {
        listUser().then(response => {
          this.doctorOptions = response.rows.filter(user => user.identityType === 'D')
          this.nurseOptions = response.rows.filter(user => user.identityType === 'N')
          // this.initBarChart()
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const bedIds = row.bedId || this.ids
        this.$modal.confirm('是否确认删除床位信息编号为"' + bedIds + '"的数据项？').then(function() {
          return delBed(bedIds)
        }).then(() => {
          this.getUserBed()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {
        })
      },
      /** 出院按钮操作 */
      handleDischarge(row) {
        const bedId = row.bedId || this.ids
        this.$modal.confirm('是否确认出院床位信息编号为"' + bedId + '"的病人项？').then(function() {
          return dischargeBed(bedId)
        }).then(() => {
          this.getUserBed()
          this.$modal.msgSuccess('出院成功')
        }).catch(() => {
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const bedId = row.bedId || this.ids
        getBed(bedId).then(response => {
          console.log('---getBed---', response.data)
          this.form = response.data
          console.log('---form---', this.form)
          this.open = true
          this.title = '修改床位信息'
        })
      },
      goTarget(href) {
        window.open(href, '_blank')
      },
      //修改显示
      formatStatus(row, column) {
        const status = row[column.property]
        switch (status) {
          case 0:
            return '空闲'
          case 1:
            return '占用'
          case 2:
            return '预约'
          default:
            return ''
        }
      },
      getUserBed() {
        this.loading = true
        getUserProfileBed().then(response => {
          console.log('---getUserProfileBed---', response.rows)
          this.bedList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate(valid => {
          console.log('---submit form---', this.form)

          this.form.btypeId = this.form.btype.btypeId
          // this.form.doctorInfo=this.form.doctorName
          // this.form.nurseInfo=this.form.nurseName
          if (valid) {
            if (this.form.id != null) {
              updateBed(this.form).then(response => {
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getUserBed()
              })
            } else {
              addBed(this.form).then(response => {
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getUserBed()
              })
            }
          }
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          bedId: null,
          btypeId: null,
          btype: {
            btypeName: null
          },
          status: null,
          bedTask: null,
          patientId: null,
          doctorInfo: null,
          doctorName: null,
          nurseInfo: null,
          nurseName: null,
          surgeryAppointment: null,
          checkinTime: null,
          remark: null
        }
        this.resetForm('form')
      }
    }
  }
</script>
<style scoped lang="scss">
  .home {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 6px;
      font-size: 18px;
      font-weight: 100;
    }

    p {
      margin-top: 6px;

      b {
        font-weight: 700;
      }
    }


    .main {
      display: flex;
      justify-content: space-between;
      transform: scale(0.6, 0.6);
      transform-origin: 10px 0px;
      width: 3040px;
    }
  }
</style>
